<template>

  <BasicForm @register="registerForm">
    <template #addOperator="{ model, field }">
      <Tag color="green" v-for="tag in model[field]" v-if="model[field]" closable @close="handleDeleteOperator">
        {{ tag.name }}[{{ tag.uid }}]
      </Tag>
      <Button @click="addOperator">+</Button>
    </template>
    <template #addCCOperator="{ model, field }">
      <Tag color="green" v-for="tag in model[field]" v-if="model[field]" closable @close="handleDeleteCCOperator">
        {{ tag.name }}[{{ tag.uid }}]
      </Tag>
      <Button @click="addCCOperator">+</Button>
    </template>
  </BasicForm>
  <!-- 选择审批人和抄送人 -->
  <StaffSelector @register="registerOperatorModal" @success="handleSelectOperatorSuccess" />
  <StaffSelector @register="registerCCOperatorModal" @success="handleSelectCCOperatorSuccess" />


  <List item-layout="horizontal" :dataSource="flowData.work.mainTask">
    <template #renderItem="{ item }">
      <ListItem>
        <ListItemMeta>
          <template #title>
            <Tag>{{ item.updateTime }}</Tag>
            <span class="font-bold">{{ item.comment }}</span>
          </template>
          <template #avatar>
            {{ item.operatorName }}
          </template>
        </ListItemMeta>
      </ListItem>
    </template>
  </List>

  
  <a-button color="success" @click="handleYes" v-if="flowData.showApprove"> 同意 </a-button> <span> </span>
  <a-button color="error" @click="handleNo" v-if="flowData.showApprove"> 拒绝 </a-button>

</template>

<script lang="ts">
import { defineComponent, ref, onMounted, } from 'vue';
import { Button, Tag, List } from 'ant-design-vue';
import { propTypes } from '/@/utils/propTypes';
import { BasicForm, useForm } from '/@/components/Form/index';
import StaffSelector from '/@/views/components/selector/staffSelector/index.vue';
import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';

import { approve, workflowdata } from '/@/api/work/work';


export default defineComponent({
  name: 'FlowData',
  components: { BasicForm, StaffSelector, Button, Tag, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, },
  props: {
    id: propTypes.number,//业务数据id
    type: propTypes.string,//业务类型
    //showCommit: propTypes.bool,//是否显示表单提交
    //showApprove: propTypes.bool,//是否显示表单审批
    //task: propTypes.object,//当前任务
    //historyList: propTypes.arrayOf(propTypes.object).def([]),//审批记录
  },
  setup(props, { emit }) {
    //主表单
    const [registerForm, { setFieldsValue }] = useForm({
      schemas: [{
        field: 'aaList',
        label: '审批人',
        component: 'Input',
        slot: 'addOperator',
        required: true,
      },
      {
        field: 'ccList',
        label: '抄送人',
        component: 'Input',
        slot: 'addCCOperator',
      }],
      labelWidth: 100,
      showActionButtonGroup: false,
    });


    const { createMessage } = useMessage();


    //选中的审批人
    const selectedOperatorList = ref([]);
    //选中的抄送人
    const selectedCCOperatorList = ref([]);
    //返回父页面的数据
    const flowData = ref({ work: { mainTask: [], task:{agree: false} }, showCommit: false, showApprove: false, aaList: [], ccList: [],})

    onMounted(() => {
      workflowdata({ id: props.id, type: props.type, }).then(res => {
        //console.log(`2.子页面onMounted，获取后台数据`, res)
        flowData.value = res
        setFieldsValue({ 'aaList': flowData.value.aaList })
        setFieldsValue({ 'ccList': flowData.value.ccList })
        emit('success', flowData.value);
      })
    })


    //debugger
    //选人弹框
    const [registerOperatorModal, { openModal: openPersonalSelector, setModalProps: setPersonalModalProps }] = useModal();
    // 弹出选择审批人
    function addOperator() {
      openPersonalSelector(true, {
        selectorProps: {
          multiSelect: false,
          selectedList: selectedOperatorList.value,
        }
      });
      setPersonalModalProps({
        title: `选择审批人`,
        bodyStyle: { padding: '0px', margin: '0px' },
        width: 850, height: 450,
        showOkBtn: true, showCancelBtn: false
      });
    }
    // 选择审批人成功回调
    async function handleSelectOperatorSuccess(selectedList: any) {
      selectedOperatorList.value = selectedList.map(item => { return { code: item.code, name: item.name } });
      if (selectedList && selectedList.length > 0) {
        console.log('SelectApprover.vue->选择审批人成功回调：', selectedList)
        flowData.value.aaList = selectedList
        emit('success', flowData.value);
        setFieldsValue({ 'aaList': selectedOperatorList.value })
      }
    }
    // 删除选择审批人成功回调
    async function handleDeleteOperator() {
      setFieldsValue({ 'aaList': [], });
      selectedOperatorList.value = [];
    }

    const [registerCCOperatorModal, { openModal: openCCSelector, setModalProps: setCCModalProps }] = useModal();
    function addCCOperator() {
      openCCSelector(true, {
        selectorProps: {
          multiSelect: true,
          selectedList: selectedCCOperatorList.value
        }
      });
      setCCModalProps({
        title: `选择抄送人`,
        bodyStyle: { padding: '0px', margin: '0px' },
        width: 850, height: 450,
        showOkBtn: true, showCancelBtn: false
      });
    }
    async function handleSelectCCOperatorSuccess(selectedList: any) {
      selectedCCOperatorList.value = selectedList.map(item => { return { code: item.code, name: item.name } });
      if (selectedList && selectedList.length > 0) {
        console.log('SelectApprover.vue->选择抄送人成功回调：', selectedList)
        flowData.value.ccList = selectedList
        emit('success', flowData.value);
        setFieldsValue({ 'ccList': selectedCCOperatorList.value, })
      }
    }
    async function handleDeleteCCOperator() {
      setFieldsValue({ 'ccList': [], });
      selectedCCOperatorList.value = [];
    }
    //选人end

    //审批通过
    async function handleYes() {
      let task = flowData.value.work.task
      task.agree = true
      console.log('审批通过', task)
      approve(task).then(res => {
        createMessage.success({
          content: res,
          duration: 1,
        })
        location.reload();
      })
    }
    //审批拒绝
    async function handleNo() {
      let task = flowData.value.work.task
      task.agree = false
      console.log('审批拒绝', task)
      approve(task).then(res => {
        createMessage.success({
          content: res,
          duration: 1,
        })
        location.reload();
      })
    }

    return {
      registerForm, handleYes, handleNo, flowData,
      registerOperatorModal, addOperator, handleSelectOperatorSuccess, handleDeleteOperator,
      registerCCOperatorModal, addCCOperator, handleSelectCCOperatorSuccess, handleDeleteCCOperator,
    }
  },
});
</script>
